<template>
  <div>


    <div :style="{height:height,width:width,backgroundColor:'white'}"  >
      <div style="padding: 10px">
        <span class="titleStyle">{{topicName}}</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="handleDetail">更多</el-button>
      </div>

      <div v-if="pinions.length===0"
           style="text-align: center;position: relative;height: 300px">
        <img src="@/assets/images/no_records.png"
             style=" position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);"/>
      </div>
      <div style="padding: 10px" v-for="(item,index) in pinions">
        <el-row>

          <el-col :span="16">
            <div style="display: flex;line-height: 25px">
              <div>
                <el-avatar :size="25" v-if="item.isnegative === 1" style="background-color: #F56C6C"> 负
                </el-avatar>
                <el-avatar :size="25" v-if="item.isneutral === 1" style="background-color: #545454"> 中
                </el-avatar>
                <el-avatar :size="25" v-if="item.ispositive === 1" style="background-color: green"> 正
                </el-avatar>
              </div>
              <div
                class="article-title"
                @click="GotoDetail(item.id)"
                v-html="item.title!=='无'&&item.title!=='[无文字]'?item.title:item.summary"
              >

              </div>
            </div>
          </el-col>

          <el-col :span="4">
            <div style="font-size: 12px;color: #888888;text-align: right">{{item.siteName}}</div>
          </el-col>
          <el-col :span="4">
            <div style="font-size: 12px;color: #888888;text-align: right">{{item.publishTime}}</div>
          </el-col>
        </el-row>

      </div>

      <el-skeleton :rows="6" animated v-if="loading"/>

    </div>

  </div>
</template>
<script>
  import {listTopic, queryByTopicId} from "@/api/system/topic";

  export default {
    props: {
      topicName: {
        type: String,
        default: ''
      },
      topicId: {
        type: Number,
        default: 0
      },
      height: {
        type: String,
        default: '400px'
      },
      width: {
        type: String,
        default: '100%'
      },
    },
    data() {
      return {
        loading: true,
        pinions: [],
        pageParams: {
          pageNum: 1,
          pageSize: 7,
        },
        queryParams:{
          topicId:this.topicId
        }
      }
    },
    computed: {},
    watch: {},
    mounted() {

    },
    created() {
      this.queryByTopicId()
    },
    methods: {
      handleDetail() {
        this.$router.push({path: '/monitoring/index'});
      },
      GotoDetail(id) {
        this.$router.push({path: '/opinion/detail', query: {id: id}});
      },
      /** 查询舆情清单列表 */
      queryByTopicId() {
        this.loading = true;
        //排序
        this.queryParams.sort = 'desc';
        queryByTopicId(this.queryParams, this.pageParams).then(response => {
          this.pinions = response.rows;
          if(this.pinions.length>7){
            this.pinions.splice(7)
          }
          this.loading = false;
        });
      },
    }
  }
</script>

<style scoped lang="scss">

  .titleStyle {
    text-align: justify;
    font-weight: bold;
    font-size: 18px;
  }

  .article-title {
    margin-left: 5px;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    width: 100%;
    color: #1e1e1e
  }

</style>
